<template>
    <div>
        <p></p>

        <el-form :model='entity' :rules='rules' ref='form'  label-width='100px' class='dialog-form'>

            <el-row :span='24'>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='段落' prop='segment'>
                        <el-input   placeholder='段落' v-model='entity.segment'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='班次标识' prop='classItemId'>
                        <el-input disabled placeholder='班次标识' v-model='entity.classItemId'>
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span='12'>
                    <el-form-item style='width:100%' label='上班卡' prop='sStart'>
                        <el-input  placeholder='上班卡' v-model='entity.sStart'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='上班免卡' prop='sStartNo'>
                        <el-select style='width:100%' v-model='entity.sStartNo' >
                            <el-option :key = 'true' :value = 'true' :label = '"是"' ></el-option >
                            <el-option :key = 'false' :value = 'false' :label = '"否"' ></el-option >
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='上班卡前范围:分钟' prop='sStartB'>
                        <el-input  placeholder='上班卡前范围:分钟' v-model='entity.sStartB'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='上班卡后范围:分钟' prop='sStartA'>
                        <el-input  placeholder='上班卡后范围:分钟' v-model='entity.sStartA'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='下班卡' prop='sEnd'>
                        <el-input  placeholder='下班卡' v-model='entity.sEnd'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='下班免卡' prop='sEndNo'>
                        <el-select style='width:100%' v-model='entity.sEndNo' >
                            <el-option :key = 'true' :value = 'true' :label = '"是"' ></el-option >
                            <el-option :key = 'false' :value = 'false' :label = '"否"' ></el-option >
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='下班卡前范围:分钟' prop='sEndB'>
                        <el-input  placeholder='下班卡前范围:分钟' v-model='entity.sEndB'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='下班卡后范围:分钟' prop='sEndA'>
                        <el-input  placeholder='下班卡后范围:分钟' v-model='entity.sEndA'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='标准工时' prop='hStandard'>
                        <el-input  placeholder='标准工时' v-model='entity.hStandard'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='扣除工时' prop='hMinus'>
                        <el-input  placeholder='扣除工时' v-model='entity.hMinus'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='包含加班' prop='includeOvertime'>
                        <el-select style='width:100%' v-model='entity.includeOvertime' >
                            <el-option :key = 'true' :value = 'true' :label = '"是"' ></el-option >
                            <el-option :key = 'false' :value = 'false' :label = '"否"' ></el-option >
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='加班工时' prop='hOvertime'>
                        <el-input  placeholder='加班工时' v-model='entity.hOvertime'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='是否跨天' prop='overDay'>
                        <el-select style='width:100%' v-model='entity.overDay' >
                            <el-option :key = 'true' :value = 'true' :label = '"是"' ></el-option >
                            <el-option :key = 'false' :value = 'false' :label = '"否"' ></el-option >
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='修改时间' prop='updatedAt'>
                        <el-input disabled placeholder='修改时间' v-model='entity.updatedAt'>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>


    </div>
</template>
<style lang="less" scoped>
    .merchantLogo .el-upload-dragger {
        img {
            height: 200px !important;
        }
    }

    .dialog-form {
        .el-radio-group {
            .el-radio {
                display: flex;
                align-items: center;
            }

            label {
                height: 40px;
            }
            .group-text {
                display: inline-block;
                width: 100px;
            }
            .title-text {
                display: inline-block;
                width: 120px;
            }
        }

    }
</style>

<script>
    //import ProductTypeSelect from '@/components/widgets/dongxw/ProductTypeSelect.vue';


    const defaultEntity = {
        classItemId:  null,	//  班次标识
        classMasterId: 10,	//  班次主标识
        segment: 1,	//  段落
        sStartB: 60,	//  上班卡前范围:分钟
        sStartA: 30,	//  上班卡后范围:分钟
        sStart:  '09:00' ,	//  上班卡
        sStartNo:  false,	//  上班免卡
        overDay:  false,	//  是否跨天
        sEnd:  '12:00' ,	//  下班卡
        sEndNo:  false,	//  下班免卡
        sEndB: 30,	//  下班卡前范围:分钟
        sEndA: 60,	//  下班卡后范围:分钟
        hStandard: 0,	//  标准工时
        hMinus: 0,	//  扣除工时
        includeOvertime:  false,	//  包含加班
        hOvertime: 0,	//  加班工时
        updatedAt:  null,	//  修改时间
    };
    export default {
        components: { },
        props:{
            parentId:{
                // type:Number
            }
        },
        data() {
            return {
                ppp: '',

                ruleTpl: {when: null, then: null},
                entity: _.cloneDeep(defaultEntity),
                dateRange: [],
                oldProps: [],
                ruleDefs: [],
                isDisabled: false,
                limitTotal: false,
                rules: {
                    custNo: [
                        {required: true, message: "编号不能为空", trigger: "blur"},
                        {
                            min: 1,
                            max: 6,
                            message: "长度在 1 到 6 个字符",
                            trigger: "blur"
                        }
                    ],
                    custName: [
                        {required: true, message: "名称不能为空", trigger: "blur"},
                        {
                            min: 1,
                            max: 64,
                            message: "长度在 1 到 64 个字符",
                            trigger: "blur"
                        }
                    ],
                    startOn: [
                        {
                            required: true,
                            message: "请选择开始时间",
                            trigger: "blur"
                        }
                    ],
                    merchantId: [
                        {
                            type: "number"
                        }
                    ],
                    status: [
                        {
                            type: "number",
                            required: true,
                            message: "请选择状态",
                            trigger: "change"
                        }
                    ],
                    discountType: [
                        {
                            type: "number",
                            required: true,
                            message: "请选择优惠类型",
                            trigger: "change"
                        }
                    ],

                }
            };
        },
        methods: {
            getProps(scope) {
                return this.entity.props.filter(p => p.propScope == scope);
            },
            onRuleDefsLoaded(opts) {
                this.ruleDefs = opts || [];
                this.resetProps();
            },
            onDiscountTypeChange(val) {
                if (val == 3) {
                    //次数只能一次
                    this.entity.discountValue = 1;
                }
            },
            resetProps() {


            },
            setValues(vals) {
                this.resetEntity = _.cloneDeep(vals);
                this.entity = _.cloneDeep(this.resetEntity);
             },
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.entity.classMasterId = this.parentId;
                        let params = Object.assign({}, this.entity);
                        console.log(this.entity);
                        this.$api.attend.attend.ClassItemService.save(params).then(rsp => {
                            this.$emit("saved", rsp);
                        });
                    }
                });
            },
            resetForm() {
                //this.$refs["form"].resetFields();
                this.entity = _.cloneDeep(defaultEntity);
                if (!this.entity.id) {
                    this.entity.updatedAt = this.$dongxwDict.formatDatetime(new Date())
                    this.entity.classMasterId = this.parentId
                }
            },
            init(options) {
                this.resetForm();
                if (options.classItemId) {
                    //console.log(JSON.stringify(this.entity));

                    this.$api.attend.attend.ClassItemService.findById(options.classItemId).then(r => {
                        //console.log(JSON.stringify(r))
                        this.entity = r.data;
                    });
                } else {
                    this.isDisabled = false;
                }
            }
        },
        mounted() {
            this.$on("init", this.init);
            this.$on("submit", this.submitForm);
        }
    };
</script>
